<template>
  <view class="dayadd">
    <customHeadTop>
      <template #left>{{ id?"编辑":"新增" }}</template>
    </customHeadTop>
    <view class="main">
      <view class="left">
        <scroll-view scroll-y class="scroll-view">
          <uni-forms
            :modelValue="formData"
            :rules="rules"
            label-align="left"
            ref="formRef"
            :label-width="200"
          >
            <uni-forms-item label="日期" name="day" required>
              <uni-datetime-picker type="date" v-model="formData.day" />
            </uni-forms-item>
            <uni-forms-item label="专题" name="theme" required>
              <uni-easyinput
                type="text"
                v-model="formData.theme"
                placeholder="请输入专题"
              />
            </uni-forms-item>
            <uni-forms-item label="描述" name="description">
              <uni-easyinput
                type="textarea"
                v-model="formData.description"
                placeholder="请输入描述"
              />
            </uni-forms-item>
            <uni-forms-item label="是否可见" name="checked">
              <switch
                :checked="formData.checked"
                active-value="1"
                inactive-value="0"
                @change="handleCheckChange"
              />
            </uni-forms-item>
            <uni-forms-item label="关联图片" name="piclist" required>
              <VueDraggableNext
                class="content"
                v-model="formData.piclist"
                filter=".add"
                animation="300"
              >
                <view
                  class="item"
                  v-for="(item, index) in formData.piclist"
                  :key="item._id"
                  @click="previewImage(index)"
                >
                  <image :src="getSmallImage(item.picurl)" mode="aspectFill" />
                  <view class="close" @click.stop="handleDelete(index)">
                    <uni-icons
                      type="closeempty"
                      size="22"
                      color="#fff"
                    ></uni-icons>
                  </view>
                </view>
                <view class="item add" @click="openDrawer">
                  <uni-icons type="link" size="40" color="#666"></uni-icons>
                </view>
              </VueDraggableNext>
            </uni-forms-item>
            <uni-forms-item>
              <view class="operate-btn">
                <button type="primary" size="mini" @click="handleSave">
                  保存
                </button>
                <button type="warn" size="mini" @click="goBack">返回</button>
              </view>
            </uni-forms-item>
          </uni-forms>
        </scroll-view>
      </view>
      <view class="right">
        <view class="box">
          <dayItem :item="formData" :operate="false" />
        </view>
      </view>
    </view>
    {{formData.piclist}}
  </view>
  <dayDrawer ref="dayDrawerRef" v-model:selectList="formData.piclist" />
</template>

<script setup>
import customHeadTop from '@/components/cunstom-head-top/custom-head-top.vue';
import dayItem from './children/DayItem.vue';
import { ref } from 'vue';
import dayDrawer from './children/DayDrawer.vue';
import { getSmallImage } from '@/utils/tools';
import { VueDraggableNext } from 'vue-draggable-next';
import { showToast } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app';
const dayCloudObj = uniCloud.importObject('admin-activity-everyday');

const formData = ref({
  day: '',
  theme: '',
  description: '',
  checked: true,
  piclist: [],
});
let id = '';
const dayDrawerRef = ref(null);
const rules = ref({
  day: {
    rules: [{ required: true, errorMessage: '日期为必填项' }],
  },
  theme: {
    rules: [{ required: true, errorMessage: '专题为必填项' }],
  },
  piclist: {
    rules: [{ required: true, errorMessage: '请选择关联图片' }],
  },
});
const formRef = ref(null);
const handleCheckChange = (e) => {
  formData.value.checked = e.detail.value;
};
const goBack = () => {
  uni.navigateBack();
};
const handleSave = async () => {
  await formRef.value.validate();
  let params = {
    ...formData.value,
    piclist: formData.value.piclist.map((item) => item._id),
  };
  let res = id
    ? await dayCloudObj.update(params)
    : await dayCloudObj.add(params);
  console.log('🌺 ~ handleSave ~ res:🌳', res);
  if (res.errCode == 0) {
    showToast({
      title: id ? '修改成功' : '保存成功',
    });
    setTimeout(() => {
    goBack();
    }, 1000);
    uni.$emit("daySuccess")
  }
};
const openDrawer = () => {
  dayDrawerRef.value.openDrawer();
};
const handleDelete = (index) => {
  formData.value.piclist.splice(index, 1);
};
const previewImage = (index) => {
  uni.previewImage({
    urls: formData.value.piclist.map((item) => item.picurl),
    current: index,
  });
};
const getDayItem = async () => {
  const res = await dayCloudObj.item(id);
  console.log('🌺 ~ getDayItem ~ res:🌳', res);
  if (res.errCode === 0) {
    formData.value = res.data[0];
  }
};
onLoad((option) => {
  if (option.id) {
    id = option.id;
    getDayItem();
  }
});
</script>

<style lang="scss" scoped>
.dayadd {
  .main {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - var(--top-window-height) - 100px);
    .left {
      flex: 1;
      padding: 10px;
      .scroll-view {
        height: 100%;
      }
      .uni-forms-item {
        display: block;
      }
      :deep(.uni-forms-item__label) {
        font-weight: 600;
      }
      .content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        .item {
          width: 100%;
          aspect-ratio: 9/16;
          border-radius: 5px;
          overflow: hidden;
          border: 1px solid #eee;
          position: relative;
          cursor: pointer;
          image {
            width: 100%;
            height: 100%;
          }
          .close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: none;
          }
        }
        .item:hover .close {
          display: flex;
        }
        .item.add {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f8f8f8;
        }
      }
    }
    .right {
      border-left: 1px solid #e4e4e4;
      height: 100%;
      padding: 10px;
      .box {
        width: 300px;
        border: 1px solid #e4e4e4;
        border-radius: 8px;
        overflow: hidden;
      }
    }
  }
}
</style>
